<template>
  <div class="body_bgi full relative p_10">
    <div class="w_80_p m_0_auto mt_50">
      <div class="w_120 h_120 m_0_auto">
        <img class="full" src="../assets/image/logo.png" alt="">
      </div>

      <div class="color_fff text_center fs_1_5rem mt_40" v-if="isLogin">
        <div class="font_number1 ls_3">{{ user.judgeNumber }} 号评委</div>
        <div class="font_number1 ls_3">{{ user.name }}</div>
      </div>
    </div>

    <div class="w_full absolute left_center bottom_70 ph_20">
      <div class="w_full" v-if="isLogin">
        <div class="w_full mt_50"> 
          <van-button 
            round 
            class="w_full" 
            size="large" 
            color="linear-gradient(to bottom, #f7e0cf, #fa964e)" 
            @click="clearSession()">清空缓存
          </van-button>
        </div>
        
        <div class="w_full mt_20">
          <van-button 
            round 
            class="w_full" 
            size="large" 
            color="linear-gradient(to bottom, #f7e0cf, #ff194e)"
            @click="logout()">退出登录
          </van-button>
        </div>
      </div>

      <div class="w_full mt_100 ph_20" v-else>
        <van-button 
          round 
          type="primary" 
          size="large" 
          color="linear-gradient(to bottom, #f7e0cf, #fa964e)" 
          @click="login()">登录
        </van-button>
      </div>
    </div>

    <Tabbar />
  </div>
</template>

<script>
  import Tabbar from '@/components/tabbar.vue';
  import { Toast } from 'vant';

  export default {
    name: 'Config',
    components: { Tabbar },
    data() {
      return {
        isLogin: null,
        user: {}
      }
    },
    
    async mounted() {
      this.judgeLogin()        
    },
    methods: {
      judgeLogin() {
        let token = window.sessionStorage.getItem('token')
        this.user = JSON.parse(window.sessionStorage.getItem('user'))
        

        this.isLogin = token ? true : false
      },

      clearSession() {
        window.sessionStorage.clear()

        this.isLogin = false

        Toast.success({
          duration: 2000,
          message: '缓存已清空！'
        })
      },

      logout() {
        window.sessionStorage.clear()

        let token = window.sessionStorage.getItem('token')

        if (token) {
          Toast.fail({
            duration: 2000,
            message: '操作失败！'
          })
        } else {
          Toast.success({
            duration: 2000,
            message: '操作成功！'
          })

          this.isLogin = false

          this.$router.push('/login')
        }
      },

      login() {
        this.$router.push('/login')
      }
    }
  }
</script>

<style>
  .s { color: rgb(247, 150, 153); }
</style>